<template>
    <div>
        <search />
        <div class="flex">
            <van-sidebar v-model="activeKey">
                <van-sidebar-item v-for="item in categoryList" :key="item.id" :title="item.name"
                    @click="getCurrentData(item.id)" />
            </van-sidebar>
            <div class="content">
                <div class="banner">
                    <img :src="currentCategory.wap_banner_url" class="banner_img">
                    <h5>{{currentCategory.front_name}}</h5>
                </div>

                <div class="my_title">
                    <span></span>
                    <h3>{{currentCategory.name}}</h3>
                </div>
                <div class="subCateList">
                    <van-grid :column-num="3" :square="true" :icon-size="28">
                        <van-grid-item v-for="item in subCategoryList" :key="item.id" :icon="item.wap_banner_url"
                            :text="item.name" />
                    </van-grid>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
    import Search from '@/components/Home/Search';
    import {
        GetCategoryData,
        GetCurrentCategoryData
    } from '@/request/api'
    import {
        Notify
    } from 'vant';
    export default {
        data() {
            return {
                activeKey: 0,
                categoryList: [],
                currentCategory: {},
                subCategoryList: []
            }
        },
        methods: {
            onChange(index) {
                Notify({
                    type: 'primary',
                    message: index
                });
            },
            getCurrentData(val) {
                GetCurrentCategoryData({
                    id: val
                }).then(res => {
                    if (res.errno == 0) {
                        this.currentCategory = res.data.currentCategory;
                        this.subCategoryList = res.data.currentCategory.subCategoryList;
                    }
                })
            }
        },
        created() {
            GetCategoryData().then(res => {
                if (res.errno == 0) {
                    this.categoryList = res.data.categoryList;
                    this.currentCategory = res.data.currentCategory;
                    this.subCategoryList = res.data.currentCategory.subCategoryList;

                }
            })
        },
        components: {
            Search
        }
    }
</script>

<style lang="less" scoped>
    .flex {
        display: flex;

        .van-sidebar {
            width: 20%;
            height: 90vh;
            background-color: #f7f8fa;
        }

        .content {
            position: relative;
            width: 80%;
            background-color: #fff;

            .banner {
                .banner_img {
                    width: 95%;
                    height: 15%;
                    margin: 5px;
                    border-radius: 5px;
                    box-shadow: 0 0 6px #000;
                    filter: brightness(0.8)
                }

                h5 {
                    width: 95%;
                    position: absolute;
                    top: 7%;
                    left: 0%;
                    margin: 5px;
                    text-align: center;
                    background-color: #fff;
                }
            }

            .my_title {
                width: 100%;
                height: .5rem;
                position: relative;
                background-color: #fff;
                font-size: .16rem;

                span {
                    width: 50%;
                    height: 2px;
                    background-color: #ccc;
                    position: absolute;
                    margin: auto;
                    left: 0;
                    top: 0;
                    bottom: 0;
                    right: 0;
                }

                h3 {
                    width: 30%;
                    height: 40px;
                    background-color: #fff;
                    position: absolute;
                    margin: auto;
                    left: 0;
                    top: 0;
                    bottom: 0;
                    right: 0;
                    line-height: 40px;
                    text-align: center;
                    color: #000;
                }
            }

            .subCateList {
                .van-icon__image {
                    width: 28px;
                    height: 28px;
                }
            }
        }
    }
</style>